<template>
    <div class="playMv">
        <h2>正在播放mv:《{{Route.query.name}}》</h2>
        <video controls class="myvideo" :src="mvsrc" autoplay></video>
    </div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { useRoute } from "vue-router";
import {getMv} from '@/http/music';
import { onMounted } from "@vue/runtime-core";
const Route = useRoute();
//存放mv播放地址
let mvsrc = ref('');
onMounted(()=>{
    getMvsrc()
})
//发送请求，获取mv播放地址
const getMvsrc = async ()=>{
    let obj = await getMv(`${Route.query.mvid}`);
    mvsrc.value = obj.data.data.url
    console.log('获取到的mv信息',obj);
    
    
}

</script>

<style scoped>
.playMv {
    margin: 0px auto;
    width: 80%;
    height: 800px;
}
.myvideo {
    width: 100%;
    height: 554px;
}
h2 {
    line-height: 0px;
}
</style>